<template>
  <!-- 登录页主容器：PC端居中布局+品牌渐变背景 -->
  <div class="login-container">
    <!-- 登录卡片：PC端固定宽度+悬浮阴影，突出管理员登录属性 -->
    <div class="login-card">
      <!-- 品牌头部：Logo+标题+管理员标识 -->
      <div class="login-header">
        <img 
          src="../photos/logo.jpg" 
          alt="鞋城履行Logo" 
          class="brand-logo"
          @error="(e) => e.target.src = 'https://picsum.photos/60/60?shoe=logo'"
        >
        <div class="header-text">
          <h2>鞋城履行 - 后台管理系统</h2>
          <p class="slogan">管理员专属登录入口</p>
        </div>
      </div>

      <!-- 登录表单：精简逻辑，仅保留管理员登录必要项 -->
      <el-form 
        ref="loginFormRef"
        :model="user" 
        :rules="loginRules" 
        label-width="80px" 
        class="login-form"
        @submit.prevent="handleLogin"
      >
        <!-- 账号输入框：带管理员图标+焦点反馈 -->
        <el-form-item label="管理员账号" prop="username"  label-width="100px" >
          <el-input 
          v-model="user.username" 
          placeholder="请输入管理员账号"
          class="input-item"
          @focus="handleInputFocus('username')"
          @blur="handleInputBlur('username')"
          :class="{ 'input-focused': focusedInput === 'username' }"
          >
          <template #prefix>  <!-- 使用 prefix 插槽自定义前缀内容 -->
          <el-icon><UserFilled /></el-icon>
          </template>
          </el-input>
          </el-form-item>
        
        <!-- 密码输入框：带显示/隐藏切换+强度提示（管理员密码安全强化） -->
        <el-form-item label="管理员密码" prop="pwd"  label-width="100px" >
          <el-input 
            v-model="user.pwd" 
            :type="showPwd ? 'text' : 'password'"
            placeholder="请输入管理员密码（6-20位）"
            show-password
            class="input-item"
            @focus="handleInputFocus('pwd')"
            @blur="handleInputBlur('pwd')"
            :class="{ 'input-focused': focusedInput === 'pwd' }"
          >
          <template #prefix>  <!-- 使用 prefix 插槽自定义前缀内容 -->
          <el-icon><Lock /></el-icon>
          </template>
          </el-input>
        </el-form-item>

        <!-- 记住账号+忘记密码（管理员常用功能保留） -->
        <div class="form-extra">
          <el-checkbox v-model="rememberAccount" class="remember-checkbox">
            记住管理员账号
          </el-checkbox>
        </div>

        <!-- 仅保留登录按钮：突出管理员登录核心操作 -->
        <div class="btn-group">
          <el-button 
            type="primary" 
            class="login-btn"
            :loading="isLoginLoading"
            @click="handleLogin"
          >
            <el-icon class="login-icon"></el-icon>
            登录管理员后台
          </el-button>
        </div>
      </el-form>

      <!-- 底部版权+管理员提示 -->
      <div class="login-footer">
        <p>© 2025 鞋品管家 版权所有 | 管理员账户需联系超级管理员创建</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useAdminStore } from '@/stores/admin'; // 管理员状态管理
import { UserFilled,Lock } from '@element-plus/icons-vue'
// 仅保留管理员登录必要图标
const router = useRouter();
const store = useAdminStore();
const loginFormRef = ref(null); // 表单引用

// 登录状态管理（仅管理员账号密码）
const user = reactive({
  username: '',
  pwd: ''
});

// 交互状态（精简冗余状态）
const showPwd = ref(false); // 密码显示/隐藏
const isLoginLoading = ref(false); // 登录加载中
const rememberAccount = ref(false); // 记住管理员账号
const focusedInput = ref(''); // 当前焦点输入框

// 登录表单验证规则（强化管理员账号校验）
const loginRules = reactive({
  username: [
    { required: true, message: '请输入管理员账号', trigger: 'blur' },
    { pattern: /^[a-zA-Z_$]\w{2,11}$/, message: '账号需以字母/下划线/$开头，3-12位字符', trigger: 'blur' },
    { whitespace: true, message: '账号不能包含空格', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入管理员密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
    { max: 20, message: '密码长度不能超过20位', trigger: 'blur' },
    { whitespace: true, message: '密码不能包含空格', trigger: 'blur' }
  ]
});

// 输入框焦点处理（PC端管理员登录交互反馈）
const handleInputFocus = (inputName) => {
  focusedInput.value = inputName;
};

const handleInputBlur = (inputName) => {
  focusedInput.value = '';
  // 失焦时触发单个字段验证（管理员账号密码严谨校验）
  loginFormRef.value.validateField(inputName);
};

// 管理员登录逻辑（精简冗余，聚焦核心登录）
const handleLogin = async () => {
  // 1. 表单整体验证（管理员账号密码严谨校验）
  try {
    await loginFormRef.value.validate();
  } catch (error) {
    // 验证失败：提示第一个错误（管理员友好提示）
    ElMessage.error(error.errorMessage || '管理员账号密码填写有误，请检查后重试');
    return;
  }

  // 2. 显示登录加载状态（提升管理员操作感知）
  isLoginLoading.value = true;

  try {
    // 3. 模拟管理员登录请求（实际项目替换为后端接口请求）
    // 示例：调用管理员登录接口 const res = await adminApi.login(user.username, user.pwd)
    const mockRes = {
      code: 200,
      data: {
        token: 'shoe_admin_token_' + Date.now(), // 管理员唯一身份标识
        username: user.username,
        avatar: 'https://picsum.photos/40/40?admin=' + user.username, // 管理员头像
        role: 'admin' // 管理员角色标识
      },
      message: '管理员登录成功'
    };

    // 4. 登录成功处理（管理员状态存储）
    if (mockRes.code === 200) {
      // 存储管理员token和用户信息（状态管理）
      // store.setToken(mockRes.data.token);
      // store.setUserInfo({
      //   username: mockRes.data.username,
      //   avatar: mockRes.data.avatar,
      //   role: mockRes.data.role // 记录管理员角色
      // });

      // 5. 记住管理员账号（PC端localStorage存储，避免重复输入）
      if (rememberAccount.value) {
        localStorage.setItem('rememberedAdminAccount', user.username);
      } else {
        localStorage.removeItem('rememberedAdminAccount');
      }

      // 6. 提示+跳转管理员后台首页
      ElMessage.success(mockRes.message);
      setTimeout(() => {
        router.push('/main'); // 跳转管理员后台首页（根据实际路由调整）
      }, 800);
    } else {
      // 登录失败：管理员专属错误提示
      ElMessage.error(mockRes.message || '管理员登录失败，请检查账号密码是否正确');
    }
  } catch (error) {
    // 网络异常：管理员友好提示
    ElMessage.error('网络异常，请稍后重试（或联系技术支持）');
    console.error('管理员登录请求失败：', error);
  } finally {
    // 7. 关闭加载状态（无论成功失败）
    isLoginLoading.value = false;
  }
};

// 页面挂载时：读取PC端记住的管理员账号（提升操作效率）
onMounted(() => {
  const rememberedAccount = localStorage.getItem('rememberedAdminAccount');
  if (rememberedAccount) {
    user.username = rememberedAccount;
    rememberAccount.value = true;
  }
});
</script>

<style scoped>
/* 登录页整体背景：管理员登录专属渐变，突出专业感 */
.login-container {
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度，确保垂直方向有足够空间 */
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  background-image: radial-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex; /* 启用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* 清除默认margin/padding */
  overflow: hidden; /* 关键属性：隐藏滚动条并禁止滚动 */
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}
/* 关键修改2：登录卡片固定宽度+水平居中，微调视觉重心 */
.login-card {
  width: 480px; /* PC端固定宽度，确保不随屏幕缩放 */
  max-width: 100%; /* 小屏幕下不超出视口 */
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 40px 36px;
  transition: all 0.3s ease;
  border: 1px solid rgba(22, 93, 255, 0.08);
  margin-top: -20px; /* 视觉上向上微调，避免因卡片高度导致的"偏下"感 */
}
.login-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* 品牌头部：管理员登录标识强化 */
.login-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
}

.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.3s ease;
  border: 2px solid rgba(22, 93, 255, 0.1); /* Logo边框，突出品牌 */
}

.brand-logo:hover {
  transform: scale(1.05);
  border-color: rgba(22, 93, 255, 0.2);
}

.header-text h2 {
  font-size: 20px;
  font-weight: 600;
  color: #165DFF;
  margin-bottom: 4px;
}

.slogan {
  font-size: 12px;
  color: #666;
  font-weight: 500; /* 管理员标识加粗，提升辨识度 */
}

/* 登录表单：管理员登录专属布局 */
.login-form {
  width: 100%;
}

/* 输入框样式：PC端管理员登录交互优化 */
.input-item {
  border-radius: 8px !important;
  transition: all 0.2s ease;
  height: 44px !important; /* PC端固定输入框高度，提升一致性 */
  font-size: 14px !important;
  border-color: #e5e6eb !important;
}

.input-item.input-focused {
  border-color: #165DFF !important;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important;
}

/* 密码后缀图标：管理员登录交互优化 */
.suffix-icon {
  cursor: pointer;
  color: #999;
  transition: color 0.2s ease;
  font-size: 18px !important;
}

.suffix-icon:hover {
  color: #165DFF;
}

/* 密码强度提示：管理员密码安全强化 */
.pwd-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}

.strength-text {
  color: #666;
  font-weight: 500;
}

.strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
  max-width: 120px;
}

.strength-bar {
  height: 6px;
  flex: 1;
  border-radius: 3px;
  background-color: #eee;
  transition: background-color 0.2s ease;
}

.strength-bar.weak {
  background-color: #f53f3f;
}

.strength-bar.medium {
  background-color: #ff7d00;
}

.strength-bar.strong {
  background-color: #00b42a;
}

.strength-desc {
  color: #666;
  white-space: nowrap;
}

/* 表单额外操作：管理员常用功能布局 */
.form-extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 24px;
  font-size: 13px;
}

.remember-checkbox {
color: #666;
font-size: 13px !important;
/* 增强复选框交互，匹配管理员登录风格 */
--el-checkbox-font-size: 13px;
--el-checkbox-color: #165DFF;
}

.forgot-pwd-btn {
color: #165DFF !important;
padding: 0 !important;
font-size: 13px !important;
transition: color 0.2s ease;
}

.forgot-pwd-btn:hover {
color: #0f48d9 !important;
text-decoration: underline;
}


.btn-group {
display: flex;
justify-content: center;
margin-top: 8px;
}

.login-btn {
width: 100%; /* 登录按钮占满表单宽度，提升点击区域 */
height: 46px !important;
border-radius: 8px !important;
font-size: 16px !important;
font-weight: 500 !important;
background-color: #165DFF !important;
border-color: #165DFF !important;
transition: all 0.3s ease;
}

.login-btn:hover {
background-color: #0f48d9 !important;
border-color: #0f48d9 !important;
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
}

.login-icon {
margin-right: 8px;
font-size: 18px !important;
}

/* 底部版权：强化管理员账户说明 */
.login-footer {
margin-top: 36px;
text-align: center;
font-size: 11px;
color: #999;
line-height: 1.5;
}

/* 修复 Element Plus 组件默认样式冲突（确保 PC 端显示一致） */
.el-form-item {
margin-bottom: 20px !important;
}

.el-form-item__label {
font-size: 14px !important;
color: #333 !important;
font-weight: 500 !important;
}

.el-input__prefix {
margin-right: 8px !important;
color: #999 !important;
}

.el-input__inner:focus {
border-color: #165DFF !important;
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important;
}

.el-message {
top: 20px !important; /* 提示框位置上移，避免遮挡登录表单 */
}

.el-message-box {
width: 420px !important; /* 弹窗固定宽度，PC 端显示一致 */
}

.el-message-box__title {
font-size: 16px !important;
color: #333 !important;
font-weight: 500 !important;
}

.el-message-box__content {
font-size: 14px !important;
color: #666 !important;
line-height: 1.6 !important;
}

.el-message-box__confirm {
background-color: #165DFF !important;
border-color: #165DFF !important;
}

.el-message-box__confirm:hover {
background-color: #0f48d9 !important;
border-color: #0f48d9 !important;
}
</style>